<template>
  <div class="app-container">
    <div class="optionBox clearfix">
      <el-form>
        <el-input placeholder="请输入内容" v-model.trim="categoryValue" class="chooseInput" clearable>
          <el-select v-model="inputCategory" slot="prepend" placeholder="请选择" clearable>
            <el-option v-for="category in categoryAttr" :label="category.label" :value="category.value" :key="category.value">
            </el-option>
          </el-select>
        </el-input>
        <label>申请日期</label>
        <el-date-picker 
          v-model="orderDate" 
          type="daterange" 
          value-format="yyyy-MM-dd" 
          clearable
          start-placeholder="开始日期" 
          end-placeholder="结束日期"
          class="chooseDatePicker">
        </el-date-picker>
        <label style="margin-left:10px;">产品编号
          <el-select v-model="keywords.productCode" placeholder="产品编号" clearable style="width: 100px; margin-left: 10px;">
            <el-option v-for="statusItem in proCodes" :label="statusItem.label" :value="statusItem.value" :key="statusItem.value">
            </el-option>
          </el-select>
        </label>
        <el-button class="btn-size" type="primary" icon="el-icon-search" title="搜索" @click="queryMsg">
        </el-button>
      </el-form>
      <div class="fr clearfix buttonBox new-refrech">
        <el-button class="btn-size fl" icon="el-icon-refresh" title="刷新" @click="refresh">
        </el-button>
      </div>
    </div>
    <el-table :data="tableData" stripe class="table-out-border" v-loading="isLoading">
      <el-table-column type="expand">
        <template slot-scope="props">
          <el-form label-position="left" inline class="demo-table-expand">
            <el-form-item label="订单编号">
              <span>{{ props.row.orderNo }}</span>
            </el-form-item>
            <el-form-item label="产品编号">
              <span>{{ props.row.productCode }}</span>
            </el-form-item>
            <el-form-item label="平台机构号">
              <span>{{ props.row.org }}</span>
            </el-form-item>
            <el-form-item label="投标人机构号">
              <span>{{ props.row.bidderOrg }}</span>
            </el-form-item>
            <el-form-item label="保证金金额">
              <span>{{ props.row.amount|moneyFormatter }}元</span>
            </el-form-item>
            <el-form-item label="预收手续费">
              <span>{{ props.row.advanceFee|moneyFormatter }}元</span>
            </el-form-item>
            <el-form-item label="申请日期">
              <span>{{ props.row.createDate|transformTimeF }}</span>
            </el-form-item>
            <!-- <el-form-item label="对账日期">
              <span>{{ props.row.orderCreateDate|transformTimeF }}</span>
            </el-form-item> -->
            <el-form-item label="差错类型">
              <span>{{ props.row.errorType|errorTypeStatusF }}</span>
            </el-form-item>
            <el-form-item label="对方手续费">
              <span>{{ props.row.errorFee|moneyFormatter }}元</span>
            </el-form-item>
            <el-form-item label="差错说明">
              <span>{{ props.row.remark }}</span>
            </el-form-item>
          </el-form>
        </template>
      </el-table-column>

      <el-table-column align="center" prop="orderNo" label="订单编号" min-width="150"></el-table-column> 
      <el-table-column align="center" prop="productCode" label="产品编号" min-width="80"></el-table-column>
      <el-table-column align="center" prop="org" label="平台机构号" min-width="150"></el-table-column>
      <el-table-column align="center" prop="bidderOrg" label="投标人机构号" min-width="150"></el-table-column>
      <!-- <el-table-column align="center" prop="amount" label="保证金金额(元)" min-width="120">
        <template slot-scope="scope">{{scope.row.amount|moneyFormatter}}</template>
      </el-table-column> -->
      <!-- <el-table-column align="center" prop="advanceFee" label="预收手续费(元)" min-width="120">
        <template slot-scope="scope">{{scope.row.advanceFee|moneyFormatter}}</template>
      </el-table-column> -->
      <el-table-column align="center" prop="createDate" label="申请日期" min-width="140">
        <template slot-scope="scope">{{scope.row.createDate|transformTimeF}}</template>
      </el-table-column>
      <!-- <el-table-column align="center" prop="orderCreateDate" label="对账日期" min-width="140">
        <template slot-scope="scope">{{scope.row.orderCreateDate|transformTimeF}}</template>
      </el-table-column> -->
      <el-table-column align="center" prop="errorType" label="差错类型" min-width="140">
        <template slot-scope="scope">{{scope.row.errorType|errorTypeStatusF}}</template>
      </el-table-column>
      <!-- <el-table-column align="center" prop="errorFee" label="对方手续费(元)" min-width="120">
        <template slot-scope="scope">{{scope.row.errorFee|moneyFormatter}}</template>
      </el-table-column> -->
      <!-- <el-table-column align="center" prop="remark" label="差错说明" min-width="80"></el-table-column> -->
      <!-- <el-table-column align="center" label="操作" min-width="100">
        <template slot-scope="scope">
          <el-button type="text" @click="operationClick(scope.row)">已处理</el-button>
        </template>
      </el-table-column> -->
    </el-table>
    <div class="pageBox fr clearfix">
      <el-pagination
        layout="total, sizes, prev, pager, next, jumper" 
        :page-sizes="[10, 20, 30, 40]" 
        :total="totalCount" 
        :page-size="keywords.pageSize" 
        :current-page="keywords.page" 
        @size-change="handlePageSizeChange" 
        @current-change="handlePageChange">
      </el-pagination>
    </div>
  </div>
</template>
<script>
import { clearNullAttr } from '@/api/common'
import { queryFileError } from '@/api/report'
import { queryProductCodes } from '@/api/order'

export default {
  data: function() {
    return {
      isLoading: false,
      tableData: null,
      totalCount: null, // 数据总条数
      inputCategory: null, // 下拉选择的查询属性
      categoryValue: null, // 下拉选择对应查询属性的值
      categoryAttr: [
        { label: '订单编号', value: 'orderNo' },
        { label: '平台机构号', value: 'org' },
        { label: '投标人机构号', value: 'bidderOrg' }
      ],
      keywords: { // 查询参数
        page: 1,
        pageSize: 10,
        orderNo: null, // 订单编号
        org: null, // 平台机构号
        bidderOrg: null, // 投标人机构号
        productCode: null, // 产品编号
        startDate: null, // 开始日期(申请日期)
        endDate: null // 结束日期
      },
      orderStatus: [
        // { label: '申请', value: '01' },
        { label: '处理中', value: '02' },
        { label: '成功', value: '03' },
        { label: '失败', value: '04' },
        { label: '中止', value: '05' }
      ], // 订单状态下拉数据
      proCodes:[
        { label: 'BDL01', value: 'BDL01' }
      ], // 产品编号下拉数据
      orderDate: ''
    }
  },
  filters: {
    errorTypeStatusF(statusCode) {
      const statusList = {
        'BIDDINGORG_NOT_EQUAL': '投标人机构号不一致',
        'AMOUNT_NOT_EQUAL': '订单金额不一致',
        'ADVANCEFEE_NOT_EQUAL': '预收手续费不一致',
        'NOT_EQUAL': '手续费不匹配',
        'LOCAL_NOT_EXIST': '我方报表中无该笔交易',
        'REPORT__NOT_EXIST': '对账文件中无该笔交易'
      }
      return statusList[statusCode]
    }
  },
  computed: {},
  created: function() {
    this.fetchData()
    this.queryProCodes()
  },
  methods: {
    fetchData() { // 查询代偿订单列表数据
      this.isLoading = true
      if (this.orderDate) {
        this.keywords.startDate = this.orderDate[0]
        this.keywords.endDate = this.orderDate[1]
      } else {
        this.keywords.startDate = null
        this.keywords.endDate = null
      }
      this.keywords[this.inputCategory] = this.categoryValue
      const uploadData = clearNullAttr(this.keywords)
      queryFileError({}, uploadData).then(res => {
        console.log('list', res)
        if (res.code === '000000') {
          this.tableData = res.data.records
          this.totalCount = res.data.totalCount
          delete this.keywords[this.inputCategory]
          this.isLoading = false
        }
      }).catch(error => {
        this.isLoading = false
        console.log(error)
      })
    },
    queryProCodes() { // 查产品编号
      queryProductCodes({}).then(res => {
        console.log('qcodes', res)
        if(res.code === '000000' && res.data && res.data.records){
          let theproCodes =[]
          let proArray = res.data.records
          for(let i=0,l=proArray.length; i<l; i++){
            let proCodeObject = {label:proArray[i].productCode,value:proArray[i].productCode}
            theproCodes.push(proCodeObject)
          }
          this.proCodes = theproCodes
        }
      }).catch(error =>{
        console.log('qeryProCodes error',error)
      });
    },
    queryMsg() { // 查询按钮点击
      this.keywords.page = 1
      this.fetchData()
    },
    refresh() { // 刷新按钮点击事件
      this.keywords.page = 1
      this.fetchData()
    },
    operationClick(row) { // 操作(已处理)点击
      
    },
    handlePageChange(page) { // 页面跳转事件
      this.keywords.page = page
      this.fetchData()
    },
    handlePageSizeChange(pageSize) { // 表格一页显示的数据数目 改变事件
      this.keywords.pageSize = pageSize
      this.fetchData()
    }
  }
}
</script>
<style lang="scss" scoped>
/* type="text/scss" */
.optionBox {
  label {
    margin-right: 10px;
  }
  form {
    .chooseInput {
      width: 300px;
      margin-right: 10px;
      vertical-align: middle;
      .el-select {
        min-width: 120px;
      }
    }
    .chooseDatePicker {
      width: 380px;
    }
    label {
      margin-bottom: 0;
    }
    * {
      vertical-align: middle;
    }
  }
}
</style>
<style lang="scss">
  .demo-table-expand {
    font-size: 0;
    label {
      width: 100px;
      color: #99a9bf;
    }
    .el-form-item {
      margin-right: 0;
      margin-bottom: 0;
      width: 50%;
    }
  }
  .el-table__expanded-cell[class*=cell]{
    padding: 20px 50px;
  }
</style>
